<template>
<div class="channel_edit">
<!-- 标题部分 -->
<van-cell-group>
  <!-- 我的频道 -->
  <van-cell class="channel_item" :border="false" title="我的频道">
    <van-button
    @click="editShowBtn = !editShowBtn"
    class="edit_btn" plain round size="small"
    type="danger">{{editShowBtn ? '完成': '编辑'}}
    </van-button>
  </van-cell>
  <!-- 我的频道列表 -->
  <van-grid class="my_channel" :gutter="10">
     <van-grid-item class="channel_item"
     @click="clickMyChannel(item,index)"
     v-for="(item, index) in myChannels"
     :key="item.id"
     :text="item.name"
     :class="index === 0 ? 'active':''">
        <van-icon v-show="editShowBtn && index !== 0"
        slot="icon"
        name="close"/>
     </van-grid-item>
  </van-grid>
</van-cell-group>

<!-- 频道推荐 -->
<van-cell-group>
  <van-cell :border="false" title="推荐频道">
  </van-cell>
  <van-grid class="recommend_channel" :gutter="10">
     <van-grid-item
     @click="addChannels(value)"
     class="channel_item" v-for="value in getCommendChannels"
     :key="value.id" icon="plus"
     :text="value.name" />
  </van-grid>
</van-cell-group>
</div>
</template>

<script>
import {
  loadChannels,
  getChannels,
  deleteUserChannels
} from '@/api/channel.js'
import { mapState } from 'vuex'
import { setItem } from '@/utils/storage.js'
export default {
  props: {
    myChannels: {
      type: Array,
      required: true
    },
    active: {
      type: Number,
      required: true
    }
  },
  data () {
    return {
      allChannels: [],
      editShowBtn: false

    }
  },
  computed: {
    // 从总的频道列表中获取推荐频道
    getCommendChannels () {
      // filter直接返回过滤之后的数组
      return this.allChannels.filter(item => {
        // 如果find找到这一项，返回值是找到是这一项
        // 如果没找到，返回undefined
        return !this.myChannels.find(value => item.id === value.id)
      })
    },
    // 拿到user
    ...mapState(['user'])
  },
  created () {
    this.getChannels()
  },
  // 加载所有的频道列表
  methods: {
    // 获取所有频道列表
    async getChannels () {
      try {
        const { data: res } = await loadChannels()
        // console.log(res.data.channels)
        this.allChannels = res.data.channels
      } catch (err) {
        this.$toast.fail('获取失败')
      }
    },
    // 点击添加频道
    async addChannels (value) {
      this.myChannels.push(value)
      // 数据持久化
      if (this.user) {
        // 存储到后台value
        try {
          await getChannels({
            id: value.id,
            seq: this.myChannels.length
          })
        } catch (err) {
          this.$toast.fail('获取数据失败')
        }
      } else {
        // 未登录存到本地
        // console.log('未登录')
        setItem('http_channels', this.myChannels)
      }
    },
    // 点击我的频道列表
    clickMyChannel (item, index) {
      if (this.editShowBtn) {
        if (index === 0) return
        if (index <= this.active) {
          this.$emit('updateActive', this.active - 1, true)
        }
        // 删除
        const id = this.myChannels[index].id
        this.myChannels.splice(index, 1)
        // 持久化
        this.deleteChannels(id)
      } else {
      // 切换
        this.$emit('updateActive', index)
      }
    },

    // 点击删除持久化
    deleteChannels (id) {
      if (this.user) {
        // 已登陆，删除指定的频道
        try {
          deleteUserChannels(id)
        } catch (err) {
          this.$toast.fail('获取指定频道失败')
        }
      } else {
        setItem('http_channels', this.myChannels)
      }
    }
  }
}
</script>

<style scoped lang='less'>
 .channel_edit {
    padding-top: 80px;
    // 编辑按钮
    .edit_btn {
      width: 104px;
      height: 40px;
      border-radius: 30px;
      .van-button__text {
        font-size: 24px;
      }
    }
    /deep/.channel_item {
      .van-grid-item__content {
        width: 160px;
        height: 86px;
        border-radius: 6px;
        padding: 2px;
        .van-icon-plus {
          font-size: 22px !important;
        }
        // background-color: gray;
        .van-grid-item__text {
          font-size: 28px;
          color: black;
        }
      }
    }
      // .van-grid-item__content::after {
      //   border-width: 0;
      // }
    /deep/.active {
          .van-grid-item__text{
            color: red !important;
          }
    }
    // 定位图标
    /deep/.my_channel {
      .van-grid-item__icon-wrapper {
        position: static !important;
       }
        .van-icon-close {
          position: absolute;
          font-size: 36px;
          top: -13px;
          right: -13px;
        }
      .van-grid-item__text {
        margin-top: 0;
      }
    }

    // 频道推荐和文本样式
    /deep/.recommend_channel {
      .van-grid-item__content {
        flex-direction: row;
        .van-icon-plus {
          font-size: 8px;
          color: black;
        }
        .van-grid-item__text {
          margin-top: 8px;
          margin-left: 5px;
        }
      }
    }
  }
</style>
